import Taro, { Component } from '@tarojs/taro'
import { View, Input, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import { AtIcon } from "taro-ui"

import './searchbar-com.scss'

@inject('Store')
@observer

class SearchbarCom extends Component {
  constructor(props) {
    super(props)
    this.state= {
      myValue: ''
    }
  }
  handleFocus=() => {
    if(this.props.onFocus){
      this.props.onFocus();
    }
  }
  handleChange= (e) => {
    let value = e.detail.value;
    this.props.Store.setKeywords(value)
  }
  handleSearch = () => {
    let {keywords} = this.props.Store

    this.props.onSearch(keywords);
  }
  handleClick = () => {
    if(this.props.onClick){
      this.props.onClick();
    }
  }
  handleClear = () => {
    if(this.props.onClear){
      this.props.onClear();
    }
  }
  render () {
    const { placeholder, disabled, actionName, } = this.props
    let keywords = this.props.Store.keywords
    return (
      <View className='search-wrap' onClick={this.handleClick}>
        <View className="search-content">
          <AtIcon prefixClass='icon' value='Search' size='16' color='#777'></AtIcon>
          <Input
            value={keywords} 
            className='search-input' 
            type='text' 
            placeholder={placeholder}
            onFocus={this.handleFocus} 
            focus
            disabled={disabled}
            onInput={this.handleChange}
          />
          {/* <AtIcon prefixClass='icon' value='close1' size='14' color='#333'></AtIcon> */}
          {keywords && <AtIcon prefixClass='icon' value='close1' size='14' color='#777' onClick={this.handleClear}></AtIcon>}
        </View>
        {
          actionName &&  
          <View className='btn'>
            <Text onClick={this.handleSearch}>{actionName}</Text>
          </View>
        }
      </View>
      
    )
  }
}

export default SearchbarCom
